<template>
    <SearchIng />
    <div class="search_box">
        <div class="w">
            <div class="search_box_top">
                <a-tabs v-model:activeKey="activeKey">
                    <a-tab-pane :key="item.id" v-for="item  in activeLiss">
                        <template #tab>
                            <span @click="activeClick(item)">
                                {{ item.name }}
                                <span v-if="item.name == '品牌'" class="Beta">Beta</span>
                            </span>
                        </template>
                    </a-tab-pane>
                </a-tabs>
                <Signals ref="childeRef" v-if="activeKey == '1'" />
                <Provider v-if="activeKey == '2'" />
                <Purchases v-if="activeKey == '3'" />
                <Branding v-if="activeKey == '4'" />
                <Projections v-if="activeKey == '5'" />
                <Proposed v-if="activeKey == '6'" />
                <BiddingAgent v-if="activeKey == '7'" />
            </div>
            <Demonstrate />
            <!-- 全部标讯 -->
            <TenderContent v-if="activeKey == '1'" />
            <!-- 供应商 -->
            <VendorData v-if="activeKey == '2'" />
            <!-- 采购商 -->
            <Purcdata v-if="activeKey == '3'" />
            <!-- 品牌 -->
            <Brandingdata v-if="activeKey == '4'" />
            <!-- 招标预测 -->
            <Projdata v-if="activeKey == '5'" />
            <!-- 拟建项目 -->
            <Proposedata v-if="activeKey == '6'" />
            <!-- 招标代理机构 -->
            <Biddingdata v-if="activeKey == '7'" />
            <!-- 公司 -->


            <!--  -->
            <Searchbuttom/>
        </div>
    </div>
</template>
  
<script setup>
import SearchIng from '@/components/searchs/index.vue';
import Searchbuttom from '@/components/searchbuttom/index.vue';
import Signals from './computer/signals/index.vue';
import Provider from './computer/provider/index.vue';
import Purchases from './computer/purchases/index.vue';
import Branding from './computer/branding/index.vue';
import Projections from './computer/projections/index.vue';
import Proposed from './computer/proposed/index.vue';
import BiddingAgent from './computer/biddingAgent/index.vue';
import Demonstrate from './computer/demonstrate/index.vue'; //已筛选的条件
import TenderContent from './computer/tenderContent/index.vue';
import VendorData from './computer/vendorData/index.vue';
import Purcdata from './computer/purcdata/index.vue';
import Brandingdata from './computer/brandingdata/index.vue';
import Projdata from './computer/projdata/index.vue';
import Proposedata from './computer/proposedata/index.vue';
import Biddingdata from './computer/biddingdata/index.vue';
import { onMounted, ref,  } from 'vue';



import { useRadio1Store} from '@/pain/search/search';
const signalsRadio1 = useRadio1Store()
let activeKey = ref("1");

let activeLiss = [
    {
        id: "1",
        name: "全部标讯",
    },
    {
        id: "2",
        name: "供应商",
    },
    {
        id: "3",
        name: "采购商",
    },
    {
        id: "4",
        name: "品牌",
    },
    {
        id: "5",
        name: "招标预测",
    },
    {
        id: "6",
        name: "拟建项目",
    },
    {
        id: "7",
        name: "招标代理机构",
    },
    {
        id: "8",
        name: "公司",
    },
];

const activeClick = (id) => {
    activeKey.value = id.id;
    signalsRadio1.id = id.id;
    console.log(activeKey.value);
    console.log(childeRef.value?.radio1);
};

const childeRef = ref();
onMounted(() => {
    console.log(childeRef.value?.radio1);
});


</script>
<style lang="scss" scoped>
.w {
    width: 1200px;
    margin: 0 auto;
}

.search_box {
    width: 100%;
    // height: 830px;
    background-color: #F6F6F6;

    .search_box_top {
        // height: 160px;
        margin-top: 20px;
        padding: 20px 0 10px 20px;
        background-color: #fff;

        .Beta {
            width: 30px;
            height: 14px;
            background: #fb4204;
            padding: 2px;
            border-radius: 3px;
            color: #f6f6f6;
        }
    }
}
</style>
